<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="What needs to be done?"
        autofocus
        @keyup.enter="addToList"
      />
    </header>
    <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        @click="toggleAll"
      />
      <label for="toggle-all">Mark all as complete</label>

      <ul class="todo-list">
        <li
          v-for="i in this.filteredTodos"
          :key="i.id"
          :class="{ completed: i.isCom }"
        >
          <div class="view">
            <input class="toggle" type="checkbox" v-model="i.isCom" />
            <label>{{ i.item }}</label>
            <button class="destroy" @click="remove(i)"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>
      </ul>
    </section>
    <footer class="footer">
      <span class="todo-count"
        ><strong>{{ remaining }}</strong> item left</span
      >
      <ul class="filters">
        <li>
          <a :class="{ selected: visibility === 'all' }" href="#/all">All</a>
        </li>
        <li>
          <a :class="{ selected: visibility === 'active' }" href="#/active"
            >Active</a
          >
        </li>
        <li>
          <a
            :class="{ selected: visibility === 'completed' }"
            href="#/completed"
            >Completed</a
          >
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="clearCompleted">
        Clear completed
      </button>
    </footer>
  </section>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, item: "a", isCom: false },
        { id: 2, item: "b", isCom: false },
        { id: 3, item: "c", isCom: false },
      ],
      visibility: "all",
    };
  },
  methods: {
    // 这个e是当前事件的事件对象
    toggleAll(e) {
      console.log(e);
      console.log(e.target);
      this.itemList.forEach((i) => (i.isCom = e.target.checked));
    },
    onHashChange() {
      const hash = window.location.hash.replace(/#\/?/, "");
      if (["all", "active", "completed"].includes(hash)) {
        this.visibility = hash;
      } else {
        window.location.hash = "";
        this.visibility = "all";
      }
      console.log(hash);
    },
    remove(i) {
      this.itemList.splice(this.itemList.indexOf(i), 1);
    },
    clearCompleted() {
      this.itemList = this.itemList.filter((x) => !x.isCom);
    },
    addToList() {
      var value = event.target.value.trim();
      if (!value) {
        return;
      }
      this.itemList.push({
        id: Date.now(),
        completed: false,
        item: value,
      });
      event.target.value = "";
    },
  },
  computed: {
    remaining() {
      return this.itemList.filter((i) => !i.isCom).length;
    },
    filteredTodos() {
      switch (this.visibility) {
        case "all":
          return this.itemList;
        case "active":
          return this.itemList.filter((x) => !x.isCom);
        case "completed":
          return this.itemList.filter((x) => x.isCom);
      }
    },
  },
  mounted() {
    window.addEventListener("hashchange", this.onHashChange);
  },
};
</script>
<style>
@import "https://unpkg.com/todomvc-app-css@2.4.1/index.css";
</style>
